<template>
    <div class="container">
        <h3>容器组件</h3>
        <div class="content">
            <template v-for="item in config.children" :key="item.id">
                <slot v-if="item.tag === 'custom'" :name="item.key" :data="item"></slot>
                <Label v-else>
                    <component :config="item" :is="layouts[item.tag]"></component>
                </Label>
            </template>
        </div>
    </div>
</template>

<script setup>
import { markRaw, ref, defineAsyncComponent } from 'vue'


const props = defineProps({
    config: {
        type: Object,
        default: () => ({})
    }
})
let layouts = ref({})
props.config.children.forEach(item => {
    if (item.tag !== 'custom'&&item) {
        layouts.value[item.tag] = markRaw(defineAsyncComponent(() =>
            import(`../${item.tag}/index.vue`)
        ))
    }
})

</script>

<style lang='less' scoped>
.container {
    .content {
        background-color: ghostwhite;
        padding: 16px;
    }
}
</style>